<template>
  <div>
    <el-upload
      v-if="type === 'image' && max===1"
      action
      class="avatar-uploader"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <div v-loading="loading">
        <img v-if="value" :src="value" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </el-upload>

    <el-upload
      v-if="type === 'image' && max!==1"
      action
      class="avatar-uploader"
      :class="{hide:hideUploadEdit}"
      list-type="picture-card"
      :file-list="fileList"
      :limit="max"
      :auto-upload="false"
      :on-change="beforeAvatarUpload"
      :on-remove="handleRemove"
    >
      <div>
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </el-upload>

    <el-upload
      v-if="type === 'video'"
      action
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <el-button size="small" type="primary">点击上传视频</el-button>
    </el-upload>
  </div>
</template>
<script>
import { uploadFile } from "@/api/system/common";
export default {
  data() {
    return {
      loading: false,
      hideUploadEdit: false
    };
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "image"
    },
    max: {
      type: Number,
      default: 1
    },
    fileList: {
      type: Array,
      default: () => {}
    }
  },
  methods: {
    beforeAvatarUpload(file, fileList) {
      if (this.type === "image") {
        if (this.max !== 1) {
          file = file.raw;
          this.hideUploadEdit = fileList.length >= this.max;
        }
        const reg = /\image\/(png|jpg|gif|jpeg)$/;
        const isImg = reg.test(file.type);
        const isLt10M = file.size / 1024 / 1024 < 10;
        if (!isImg) {
          this.$message.error("图片只能是 png、jpg、gif、jpeg格式!");
          return;
        }
        if (!isLt10M) {
          this.$message.error("图片大小不能超过 10MB!");
          return;
        }
      }

      let fileLoading = null;
      if (this.type === "video") {
        const reg = /video\/(avi|mov|rmvb|rm|flv|mp4|3gp)$/;
        const isVideo = reg.test(file.type);
        const isLt100M = file.size / 1024 / 1024 < 100;
        if (!isVideo) {
          this.$message.error(
            "视频只能是 avi、mov、rmvb、rm、flv、mp4、3gp格式!"
          );
          return;
        }
        if (!isLt100M) {
          this.$message.error("视频大小不能超过 100MB!");
          return;
        }
        fileLoading = this.$loading({
          lock: true,
          text: "视频上传中，请耐心等待上传！",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
      }

      this.loading = true;
      const formData = new FormData();
      formData.append("file", file);
      uploadFile(formData)
        .then(res => {
          if (this.max !== 1) {
            const fileList = [
              ...this.fileList,
              {
                url: res.url
              }
            ];
            this.$emit("change", fileList);
          } else {
            this.$emit("input", res.url);
          }
          this.$emit("clear");
          this.loading = false;
          fileLoading && fileLoading.close();
          this.msgSuccess("文件上传成功");
        })
        .catch(() => {
          this.loading = false;
          fileLoading && fileLoading.close();
          this.msgError("文件上传失败");
        });
      return false;
    },
    handleRemove(file, fileList) {
      let dl = this.fileList.indexOf(file.url);
      this.fileList.splice(dl, 1);
      this.$emit("change", this.fileList);
      this.hideUploadEdit = fileList.length >= this.max;
    }
  }
};
</script>

<style lang="css" scoped>
.avatar-uploader {
  display: inline-block;
}
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.hide /deep/.el-upload--picture-card {
  display: none;
}
.avatar-uploader /deep/.el-upload-list__item {
  transition: none !important;
}
</style>
